<template>
	<!-- 笔记列表 -->
	<view class="note-list-x">
		<view class="cs-note-tip" v-if="noteType == 1">长按可以删除笔记</view>
		<view class="cs-note-ul">
			<view :class="['cs-note-ul-li', item.isOpen ? 'li-active' : '']" v-for="(item,index) in note_list" :key='index' 
			@click="linkNoteDetail(index)" @longpress='longtapDelte(index)'>
				<view class="li-tc">
					<view class="li-tc-tc">{{item.notes_title}}</view>
					<view class="li-tc-date">{{item.Time}}</view>
				</view>
				<!-- <view class="li-img_x">
					<image class="li-img_x-img" :src="item.noteImage || '/static/logo.png'" mode="scaleToFill"></image>
				</view> -->
			</view>
			<uni-load-more v-if="note_list.length >= 10" :status="status" :content-text="contentText" />
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			uniLoadMore
		},
		props: {
			status: String,
			contentText: Object,
			note_list: Array,
			is_longtap: Boolean
		},
		data() {
			return {
				noteType: uni.getStorageSync('noteType'), //1家长 2孩子 
				longtap: false
			}
		},
		methods: {
			// 跳转笔记详情
			linkNoteDetail(index) {
				// 跳转之前将当前对应笔记ID带过去
				let unid = this.note_list[index].unid;
				// 确保没有长按时才可以跳转
				if (!this.is_longtap) {
					uni.navigateTo({
						url: `./component/tabs-note-detail?unid=${unid}`
					});
				}
			},
			
			// 长按删除事件
			longtapDelte(index) {
				this.$emit('longtapDelte', index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.note-list-x{
		margin-top: 106upx;
		margin-bottom: 120upx;
	}
	
	.cs-note-tip {
		font-size: 24upx;
		text-align: center;
		color: #999999;
	}
	
	// 笔记列表容器
	.cs-note-ul{
		margin: 30upx;
	}
	// 笔记列表
	.cs-note-ul-li{
		display: flex;
		margin-top: 20upx;
		padding: 12upx 20upx 14upx 20upx;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		border-radius: 8upx;
		background: #FFFFFF;
	}
	.cs-note-ul-li:last-child {
		margin-bottom: 120upx;
	}
	.li-active{
		border: 1px solid #00D5A2;
	}
	// 标题
	.li-tc-tc{
		font-size: 32upx;
		color: #333333;
	}
	.li-tc-date{
		font-size: 24upx;
		color: #C2C2C2;
	}
	// 图片
	.li-img_x{
		width: 84upx;
		height: 84upx;
	}
	.li-img_x-img{
		width:100%;
		height: 100%;
	}
</style>
